<template>
        <div v-show="show" @click="goTop" class="go">

        </div>
</template>

<script>
    export default {
        name: "goTop",
        data(){
            return{
                show:false,
            }
        },
        methods:{
            //控制显示隐藏
            handleScroll(){
                this.$nextTick(()=>{
                    let scrolltop=document.documentElement.scrollTop||document.body.scrollTop||window.pageYOffset;
                    scrolltop>30?this.show=true:this.show=false;
                })

            },
            //实现滚动效果
            goTop(){
                this.$nextTick(()=>{
                    let top = document.documentElement.scrollTop || document.body.scrollTop||window.pageYOffset;
                        //用于设置速度差，产生缓动的效果
                        let speed = Math.floor(top / 5);
                    // 实现滚动效果
                    const timeTop = setInterval(() => {
                        document.body.scrollTop = document.documentElement.scrollTop = top -= speed;
                        if (top <= 0) {
                            clearInterval(timeTop);
                        }
                    }, 30);

                })
            },
        },
        mounted() {
            //绑定滑动事件
            this.$nextTick(()=>{
                window.addEventListener('scroll',this.handleScroll,true);
            })

        },
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll)
        },
    }
</script>

<style scoped>
.go{
    width: 68px;
    height: 68px;
    position: fixed;
    right: 0px;
    bottom: 25px;
    background-image: url("../assets/images/classicName/off_icon.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    z-index: 9999999;

}
    .go:hover{
        background-image: url("../assets/images/classicName/on_icon.png");
    }
    @media screen and (max-width:450px) {
        .go{
            width: 34px;
            height: 34px;
            position: fixed;
            right: 24px;
            bottom: 29px;
            background-image: url("../assets/images/classicName/on_icon.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center;
            z-index: 99999;

        }
    }
</style>